<template>
	<view>
		<u-status-bar></u-status-bar>
		<u-navbar :safeAreaInsetTop="false" title="" left-text="" rightIcon="checkmark" bgColor="#FC6758"
			@leftClick="back()" @rightClick="submit()">
		</u-navbar>
		<view class="head">
			<view class="headquan">发布圈子</view>
			<view class="headnei">快速发圈子内容</view>
		</view>


		<view class="center">
			<view class="centertitle">
				<view class="titlename">添加标题</view>
				<u--textarea maxlength="15" class="titletextarea" :autoHeight="true" v-model="title"
					placeholder="请输入圈子的标题" border="bottom"></u--textarea>
			</view>

			<view class="centertitle">
				<view class="titlename">添加圈子描述</view>
				<u--textarea maxlength="-1" class="titletextareas" v-model="description" placeholder="请输入描述"
					border="bottom">
				</u--textarea>
			</view>


			<u-action-sheet :actions="list" @select="selectClick" @close="show = false" :title="titlenull" :show="show">
			</u-action-sheet>

			<!-- <view class="u-page" > -->

			<!-- </view> -->
			<view class="files">
				<u-upload :compressed="false" :maxSize="104857600" @oversize="oversize1" class="releaseUpload" ref="upload" width='110upx' height="110upx" :fileList="fileList2"
					@afterRead="afterRead2" @delete="deletePic" name="2" multiple :ifupload='flietf' maxCount='1'
					accept='video' @click="selectClick,show = true">
					<view class="imagebg" v-if="fileList2.length == 0">
						<image src="../../static/tabsIcon/video.png" style="width: 80upx;height: 80upx;"></image>
					</view>

				</u-upload>
				<u-upload :compressed="false" class="releaseUpload" ref="upload" width='110upx' height="110upx" :fileList="fileList1"
					@afterRead="afterRead" @delete="deletePic" name="1" multiple :ifupload='flietf' maxCount='1'
					accept='image' @click="selectClick,show = true">
					<view class="imagebg" v-if="fileList1.length == 0">
						<image src="../../static/tabsIcon/phone.png" style="width: 80upx;height: 80upx;"></image>
					</view>

				</u-upload>
			</view>
			<!-- <u-button type="primary" @click="selectClick,show = true" style="margin-top: 20upx;">上传图片/视频</u-button> -->
		</view>








		<!-- <u-button type="warning" @click="submit()">发布</u-button> -->



	</view>
</template>

<script>
	import Rrequest from '@/util/Rrequest'
	import upload from '../../uni_modules/uview-ui/components/u-upload/u-upload.vue'
	import {
		uploadfile
	} from '@/api/community'
	export default {
		data() {
			return {
				loadings:false,
				flietf: true,
				filetype: 'file',
				urls: '/boot/circle/create',
				description: '',
				// accept: 'image',
				fileList1: [],
				fileList2: [],
				fileListfeng: [],
				show: false,
				maxCount: 9,
				titlenull: '',
				title: '',
				list: [{
						type: 'image',
						name: '照片',
						color: '#000000',
						fontSize: '26'
					},
					{
						type: 'video',
						name: '视频',
						color: '#000000',
						fontSize: '26'
					},
				],
				token: '',
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token')
		},
		methods: {
			//click事件函数
			gotoPre: function() {
				uni.navigateBack() //返回上一页
			},

			uploadfun() {
				// this.flietf = true;
				this.$refs.upload.chooseFile()
			},
			selectClick(index) {
				this.accept = index.type
				if (this.fileList1.length >= this.maxCount) {
					uni.showToast({
						title: '最多可以传九张图片或一个视频',
						icon: 'error',
						duration: 1000
					});
				} else {
					let _this = this;
					_this.flietf = true;
					if (index.type == 'image') {

						if (_this.fileList1.length == 0) {
							_this.maxCount = 9;
						}
						_this.accept = 'image';
						console.log(_this.flietf)
						// this.
						setTimeout(() => {
							_this.uploadfun()
						}, 10)
						// _this.uploadfun()
					} else if (index.type == 'video') {

						if (this.fileList1.length == 0) {
							this.maxCount = 2;
						}
						uni.showToast({
							title: '第一个文件为视频文件，第二个文件为图片文件',
							icon: 'error',
							duration: 4000
						});
						let _this = this;
						setTimeout(() => {
							_this.uploadfun()
						}, 10)
						// this.uploadfun()
					}

				}

			},
			// 删除图片
			deletePic(event) {
				// this.fileList1.splice(event.index, 1)
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 删除视频
			deletePic2(event) {
				// this.fileList1.splice(event.index, 1)
				this[`fileList2${event.name}`].splice(event.index, 1)
			},
			//超出大小限制
			oversize1(event){
				console.log(123)
				uni.showToast({
					title: "请上传小于100MB的视频",
					icon: 'error',
					duration: 1000
				});
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				// console.log(event)
				let lists = lists = [].concat(event.file)



				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: ''
					}))
					fileListLen++
				}
				console.log(this.fileList1)
			},
			// 新增视频
			async afterRead2(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				console.log(event)
				let lists = [].concat(event.file[0])
				console.log(this[`fileList${event.name}`].length)
				let fileListLen2 = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let item = this[`fileList${event.name}`][fileListLen2]
					this[`fileList${event.name}`].splice(fileListLen2, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: event.file[0].url
					}))
					fileListLen2++
				}
				console.log(this.fileList2)
			},
			submit() {
				uni.showLoading({
				    title: '上传中'
				});
				// uni.switchTab({
				// 	url: '/pages/community/community'
				// });
				// return;
				// console.log(this.maxCount)
				// if (this.maxCount == 9) {
				// 	// 图片
				// 	this.urls = '/boot/circle/create'
				// 	this.filetype = 'list'
				// } else if (this.maxCount == 2) {
				//视频
				this.urls = '/boot/circle/createVideo'
				// 	 this.filetype = 'file'
				// }


				this.fileList1
				let arr = []
				// console.log(this.fileList1)
				if (this.fileList1[0] == null) {
					uni.showToast({
						title: "请上传一张封面",
						icon: 'error',
						duration: 1000
					});
					return;
				}

				// if(this.fileList1[0].type == 'video'){

				let emenelt0 = this.fileList2[0]
				console.log(this.fileList2)
				arr.push({
					name: 'file',
					uri: emenelt0.url
				})
				let emenelt1 = this.fileList1[0]
				console.log(this.fileList1)
				arr.push({
					name: 'fileCover',
					uri: emenelt1.thumb
				})
				console.log(arr)
				// }else{
				// 	for (var i = 0; i < this.fileList1.length; i++) {
				// 		let emenelt = this.fileList1[i]
				// 		arr.push({
				// 			name:this.filetype,
				// 			uri:emenelt.thumb
				// 		})
				// 	}
				// }
				// for (var i = 0; i < this.fileList1.length; i++) {
				// 	let emenelt = this.fileList1[i]
				// 	arr.push({
				// 		name:this.filetype,
				// 		uri:emenelt.thumb
				// 	})
				// }
				console.log(arr)
				let a = uni.uploadFile({
					url: uni.baseURL + this.urls, //仅为示例，非真实的接口地址
					files: arr,
					header: {
						"token": this.token
					},
					name: this.filetype,
					formData: {
						'title': this.title,
						'description': this.description
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes)
						this.loadings = false;
						// uni.switchTab({
						// 	url: '/pages/community/community'
						// });
						 uni.hideLoading();
						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 1000
						});
						
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				});

			},
			back() {
				uni.navigateBack()
			}
		},
	}
</script>
<style>
	page {
		background-color: #eee;
	}
</style>
<style scoped lang="scss">
	* {

		box-sizing: border-box;
		margin: 0;
		padding: 0;
		background-color: transparent;
	}

	.u-page {
		// height: 40%;
		display: flex;
		// flex-wrap: wrap;
		// background-color: #18BC37;
		// height: 750upx;
	}

	.u-upload__wrap {
		flex-wrap: wrap;
	}

	.releaseUpload {

		// width: 100%;
		// border:4upx dashed #999999;
		// border-radius: 20upx;
		/deep/ .u-upload__wrap {
			// display: block;
			flex-wrap: wrap;
			width: 100%;
		}

		/deep/ .u-upload__button {
			display: none;
		}

		/deep/ .u-upload__wrap__preview__other {
			width: 110upx;
			height: 110upx;
		}
	}

	.head {
		background-color: #FC6758;
		height: 400upx;

		.headquan {
			padding-top: 150upx;
			padding-left: 35upx;
			font-size: 50upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 24upx;
			color: #FFFFFF;
			opacity: 1;
		}

		.headnei {
			padding-top: 20upx;
			padding-left: 35upx;
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.4;
		}
	}

	.center {
		position: relative;
		top: -80upx;
		width: 95%;
		height: 800upx;
		border-radius: 40upx;
		background-color: #FFFFFF;
		margin: 0 auto;
		z-index: 10;
		overflow: hidden;

		.centertitle {
			width: 90%;
			padding-top: 20upx;
			margin: 0 auto;

			// background-color: #007AFF;
			.titlename {
				padding-left: 20upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				opacity: 1;
			}

			.titletextarea {
				border-bottom: 1upx solid #F4F4F4;
			}

			.titletextareas {
				margin-top: 20upx;
				background-color: #F4F4F4;
				border-bottom: 1upx solid #F4F4F4;
				min-height: 200upx;
			}
		}

		.files {
			display: flex;
			width: 90%;
			padding-top: 20upx;
			margin: 0 auto;

			.imagebg {
				width: 110upx;
				height: 110upx;
				border: 4upx dashed #BBBBBB;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 10upx;
				margin-right: 20upx;
				margin-top: 20upx;
			}
		}
	}

	// .u-icon__icon{
	/deep/.u-icon__icon {
		color: #fff !important;
	}

	// }
</style>
